<template>
  <div class="home">
    <div class="recommend">推荐歌单</div>
    <van-row gutter="10">
      <van-col span="8" v-for="item in songList" :key="item.id">
        <van-image
          width="100%"
          height="100"
          src="item.picUrl"
        />
        <p class="desc">{{ item.name }}</p>
      </van-col>
    </van-row>
    <div class="recommend">最新音乐</div>
    <MusicItem v-for="item in newList" :key="item.id"
    :name="item.name"
    :authorName="item.song.artists[0].name"
    :id="item.id" />

  </div>
</template>

<script>
import { getSongList, getNewSongList } from '@/api/recommend.js'
import MusicItem from '@/components/MusicItem'

export default {
  name: 'Home',

  data () {
    return {
      songList: [],
      newList: []
    }
  },

  created () {
    this.getPersonalized()
    this.getMusic()
  },

  methods: {
    // 获取歌单数据
    async getPersonalized () {
      const res = await getSongList({
        limit: 6
      })
      // console.log(res)
      this.songList = res.data.result
      // console.log(this.songList)
    },
    // 获取推荐音乐数据
    async getMusic () {
      const res = await getNewSongList(
        {
          limit: 20
        }
      )
      // console.log(res)
      this.newList = res.data.result
      // console.log(this.newList)
    }
  },

  components: {
    MusicItem
  }
}
</script>

<style scoped>
  .recommend{
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    background-color: #ff2e16;
    color: #fff;
    padding: 0 10px;
  }
  .desc {
    font-size: 12px;
  }
</style>
